{% extends "base.html" %}

{% block content %}
<!-- 添加搜索表单 -->
<form class="mb-3 d-flex align-items-center justify-content-center" id="search-form">
    <div class="input-group" style="max-width: 500px;">
        <input type="text" class="form-control" id="search-input" placeholder="输入单字搜索"
            style="border-top-left-radius: 20px; border-bottom-left-radius: 20px; padding: 0.5rem;">
        <button type="submit" class="btn btn-primary"
            style="border-top-right-radius: 20px; border-bottom-right-radius: 20px; padding: 0.5rem 1rem;">
            搜索
        </button>
    </div>
</form>
<!-- 表格 -->
<h2 class="text-center mb-4">所有汉字编码</h2>
<div class="container px-3">
    <div class="table-responsive">
        <table class="table table-bordered table-hover mx-auto" id="data-table">
            <thead class="thead-dark">
                <tr>
                    <th class="text-light bg-dark">ID</th>
                    <th class="text-light bg-dark">汉字</th>
                    <th class="text-light bg-dark">全码</th>
                    <th class="text-light bg-dark">拼音</th>
                    <th class="text-light bg-dark">解释</th>
                    <th class="text-light bg-dark">Unicode码</th>
                    <th class="text-light bg-dark">动作</th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                <tr data-row-id="{{ row['id'] }}">
                    <td>{{ row['id'] }}</td>
                    <td class="fs-1 text-center">
                        <a href="{{ url_for('view', id=row['id']) }}" class="text-decoration-none text-primary fw-bold">
                            {{ row['hanzi'] }}
                        </a>
                    </td>
                    <td class="fs-2">{{ row['quanma'] }}</td>
                    <td>{{ row['pinyin'] }}</td>
                    <td>{{ row['jieshi'] }}</td>
                    <td>{{ row['hex'] }}</td>
                    <td>
                        <a href="{{ url_for('view', id=row['id']) }}" class="btn btn-success btn-sm">查看</a>
                        <a href="{{ url_for('edit', id=row['id']) }}" class="btn btn-warning btn-sm">编辑</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>



<!-- 分页导航 -->
<nav aria-label="Page navigation example" class="d-flex justify-content-center align-items-center mb-3">
    <ul class="pagination mb-0">
        {% if pagination.current_page > 1 %}
        <li class="page-item">
            <a class="page-link" href="?page={{ pagination.current_page - 1 }}">前一页</a>
        </li>
        {% endif %}

        {% if pagination.total_pages > 1 %}
        {% set start = max(pagination.current_page - 2, 1) %}
        {% set end = min(pagination.current_page + 2, pagination.total_pages) %}

        {% if start > 1 %}
        <li class="page-item"><a class="page-link" href="?page=1">1</a></li>
        <li class="page-item disabled"><span class="page-link">...</span></li>
        {% endif %}

        {% for page in range(start, end + 1) %}
        <li class="page-item {% if page == pagination.current_page %}active{% endif %}">
            <a class="page-link" href="?page={{ page }}">{{ page }}</a>
        </li>
        {% endfor %}

        {% if end < pagination.total_pages %} <li class="page-item disabled"><span class="page-link">...</span></li>
            <li class="page-item"><a class="page-link" href="?page={{ pagination.total_pages }}">{{
                    pagination.total_pages }}</a></li>
            {% endif %}
            {% endif %}

            {% if pagination.current_page < pagination.total_pages %} <li class="page-item">
                <a class="page-link" href="?page={{ pagination.current_page + 1 }}">后一页</a>
                </li>
                {% endif %}
    </ul>
    <form method="get" action="{{ url_for('index') }}" class="d-flex ms-3 align-items-center">
        <input type="number" name="page" min="1" max="{{ pagination.total_pages }}"
            value="{{ pagination.current_page }}" placeholder="页码" class="form-control form-control-sm mx-2"
            style="width: 220px; max-width: 150px; text-align: center;">
        <button type="submit" class="btn btn-outline-dark btn-sm"
            style="padding: 0.375rem 0.75rem; line-height: 1.5; border-radius: 0.25rem;">
            跳转
        </button>
    </form>
</nav>


<script>
    window.onload = function () {
        document.getElementById('search-form').addEventListener('submit', function (e) {
            e.preventDefault();
            var keyword = document.getElementById('search-input').value;

            // 默认当前页码和每页数量
            var page = 1;
            var perPage = 20;

            // 搜索函数，支持分页
            function performSearch(page) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/search', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        var searchResults = response.results;
                        var pagination = response.pagination;

                        // 更新表格内容
                        var tableBody = document.querySelector('#data-table tbody');
                        tableBody.innerHTML = ''; // 清空表格

                        searchResults.forEach(function (row) {
                            var tr = document.createElement('tr');
                            tr.setAttribute('data-row-id', 'search-' + row['id']);
                            tr.innerHTML = `
                            <td>${row['id']}</td>
                            <td class="fs-1 text-center">
                                <a href="/view/${row['id']}" class="text-decoration-none text-primary fw-bold">${row['hanzi']}</a>
                            </td>
                            <td class="fs-2">${row['quanma'] || ''}</td>
                            <td>${row['piyin'] || ''}</td>
                            <td>${row['jieshi'] || ''}</td>
                            <td>${row['hex'] || ''}</td>
                            <td>
                                <a href="/view/${row['id']}" class="btn btn-success btn-sm">查看</a>
                                <a href="/edit/${row['id']}" class="btn btn-warning btn-sm">编辑</a>
                            </td>
                        `;
                            tableBody.appendChild(tr);
                        });

                        // 如果没有结果
                        if (searchResults.length === 0) {
                            var emptyRow = document.createElement('tr');
                            emptyRow.innerHTML = '<td colspan="9">未找到匹配结果</td>';
                            tableBody.appendChild(emptyRow);
                        }

                        // 更新分页导航
                        var paginationNav = document.querySelector('.pagination');
                        paginationNav.innerHTML = ''; // 清空分页导航

                        if (pagination.total_pages > 1) {
                            // 前一页按钮
                            if (pagination.current_page > 1) {
                                var prevPage = document.createElement('li');
                                prevPage.classList.add('page-item');
                                prevPage.innerHTML = `<a class="page-link" href="#">前一页</a>`;
                                prevPage.addEventListener('click', function (e) {
                                    e.preventDefault();
                                    performSearch(pagination.current_page - 1);
                                });
                                paginationNav.appendChild(prevPage);
                            }

                            // 页码按钮
                            for (let i = 1; i <= pagination.total_pages; i++) {
                                let pageItem = document.createElement('li');
                                pageItem.classList.add('page-item');
                                if (i === pagination.current_page) {
                                    pageItem.classList.add('active');
                                }
                                pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
                                pageItem.addEventListener('click', function (e) {
                                    e.preventDefault();
                                    performSearch(i);
                                });
                                paginationNav.appendChild(pageItem);
                            }

                            // 后一页按钮
                            if (pagination.current_page < pagination.total_pages) {
                                var nextPage = document.createElement('li');
                                nextPage.classList.add('page-item');
                                nextPage.innerHTML = `<a class="page-link" href="#">后一页</a>`;
                                nextPage.addEventListener('click', function (e) {
                                    e.preventDefault();
                                    performSearch(pagination.current_page + 1);
                                });
                                paginationNav.appendChild(nextPage);
                            }
                        }
                    }
                };
                xhr.send(`keyword=${encodeURIComponent(keyword)}&page=${page}&per_page=${perPage}`);
            }

            // 初始搜索
            performSearch(page);
        });
    };

</script>


{% endblock %}